import React, { FC, useState } from 'react';
import { Table, Pagination, Row, Select, Input, Form, Card } from 'antd';
import { TableProps } from 'antd/lib/table/Table';
import { PaginationProps } from 'antd/lib/pagination/Pagination'
import styles from './index.less';

type RType = {};

const { Option } = Select;

const ZTable: FC<TableProps<RType>> = props => {
    const {
        style = {},
        loading = false,
        dataSource = [],
        columns,
        pagination = false,
        scroll = undefined,

        onChange = undefined,
        rowKey = '',
        rowSelection = undefined,
        size = 'middle',
        className = '',
    } = props;
    const pageSizeOptions = ['10', '20', '50'];
    const [currentPageSize, setCurrentPageSize] = useState<string>(pageSizeOptions[0])



    const onChangePageDown = (current: PaginationProps, size: PaginationProps) => {
        console.log(111, current);
        console.log(222, size);
    }
    return (
        <div className={styles.z_table_warpper}>
            <Card style={{ width: '100%', margin: '16px 0' }} bodyStyle={{ padding: '0' }}  >
                <Form
                    layout="inline"
                    className={styles.form_warpper}
                >
                    <Form.Item label="每页显示" colon={false}>
                        <Select
                            defaultValue={currentPageSize}
                            style={{ width: 120 }}
                        >
                            {pageSizeOptions.map(item => {
                                return (
                                    <Option value={item} key={item}>{`${item} 条/页`}</Option>
                                )
                            })}

                        </Select>
                    </Form.Item>
                    <Form.Item style={{ marginRight: 0 }}>
                        <Input placeholder="输入关键字搜索" />
                    </Form.Item>

                </Form>


                <Table
                    className={styles.z_table}
                    style={{ ...style }}
                    loading={loading}
                    dataSource={dataSource}
                    columns={columns}
                    rowKey={rowKey}
                    bordered
                    onChange={onChange}
                    pagination={pagination}
                    scroll={scroll}
                    rowSelection={rowSelection}
                    size={size}
                />
            </Card>
            <Row justify="space-between">
                <span>第1页 共10页, 共35405条</span>
                <Pagination
                    showQuickJumper
                    defaultCurrent={2}
                    total={500}
                    pageSizeOptions={pageSizeOptions}
                    onChange={onChangePageDown}
                    defaultPageSize={currentPageSize} />
            </Row>

        </div >
    );
};
export default ZTable;